<template>
  <div class="profile-page">
    <div class="search-section">
      <div class="search-container">
        <el-input v-model="input" style="width: 240px" placeholder="大家都在搜：小兰花" clearable />
        <el-button type="primary" :icon="Search" />
      </div>
    </div>
    <div class="hot-searches-section">
      <div class="hot-searches-title">
        <el-text class="highlighted-text">🔥热搜焦点风云榜</el-text>
      </div>
      <div class="hot-searches-items">
        <el-text class="highlighted-text">周雨彤 复旦&nbsp;&nbsp;&nbsp;&nbsp;博主拾得中国小...</el-text><br/>
        <el-text class="highlighted-text">WBG 对战 G2&nbsp;&nbsp;&nbsp;&nbsp;T1 战胜 BLG</el-text><br/>
        <el-text class="highlighted-text">马龙 VS 林诗栋&nbsp;&nbsp;&nbsp;&nbsp;孙颖莎说明天就要...</el-text><br/>
        <el-text class="highlighted-text">Jennie 权志龙去了&nbsp;&nbsp;&nbsp;&nbsp;黄磊炖豆角</el-text><br/>
        <el-text class="highlighted-text">李一桐 cos 黑寡妇&nbsp;&nbsp;&nbsp;&nbsp;男子抱光腿娃坐...</el-text><br/>
      </div>
    </div>
    <div class="grid-section">
      <div class="grid-container">
        <Grid :column-num="4" clickable>
          <GridItem icon="balance-list-o" text="汽车资讯图文信息推送及广告推送" to="/discovery/advertisement" />
          <GridItem icon="paid" text="二手车信息" badge="3" @click=ershouceh()>

          </GridItem>
          <GridItem icon="sign" text="二手车市值评估" />
          <GridItem icon="vip-card-o" text="新车置换推荐" dot />
        </Grid>
      </div>
    </div>
    <div class="news-section">
      <div class="news-container">
        <div class="news-title">最新资讯</div>
        <div class="news-list">
          <div class="news-item" v-for="(article, index) in articles" :key="index">

            <h2 class="news-title">{{ article.title }}</h2>
            <p class="news-summary">{{ article.summary }}</p>
            <span class="news-date">{{ article.date }}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup name="Profile">
import { ref } from 'vue';
import { Image, Icon, Grid, GridItem, CellGroup, Cell } from 'vant';
import { useRouter } from "vue-router";
import { useUserStore } from "@/stores/user";
import {
  Search,
} from '@element-plus/icons-vue';

const userStore = useUserStore();
const router = useRouter();

function onLogout() {
  userStore.LogOut().then(() => {
    router.push({ path: "/login" });
  });
}
//点击跳转二手车
function ershouceh(){
  router.push({ path: "/work/twocar" });
}
const articles = ref([
  {
    title: '国家发改委：不能违规异地执法',
    summary: '10 月 8 日，国务院新闻办公室举行新闻发布会，介绍“系统落实一揽子增量政策 扎实推动经济向上结构向优',
    date: '2024-10-01',
  },
  {
    title: '中方已分两批撤离 215 位中国公民含 3 名港人和 1 名台胞',
    summary: '当前黎以局势仍复杂严峻，中国驻黎巴嫩使馆仍在坚守，将继续指导协助少量留在当地的中国公民采取安全措施，保护自身安全。。',
    date: '2024-10-02',
  },
  {
    title: '2024 年国庆节假期国内出游 7.65 亿人次，总花费超 7000 亿元',
    summary: '2024 年国庆节假期，全国文化和旅游市场平稳有序。经文化和旅游部数据中心测算，国庆节假日 7 天，全国国内出游 7.65 亿人次，按可比口径同比增长 5.9%，较 2019 年同期增长 10.2%；国内游客出游总花费 7008.17 亿元，按可比口径同比增长 6.3%，较 2019 年同期增长 7.9%。',
    date: '2024-10-03',
  },
  {
    title: '商务部：对原产于欧盟的进口白兰地实施临时反倾销措施',
    summary: '根据《中华人民共和国反倾销条例》（以下称《反倾销条例》）的规定和有关调查结果，2024 年 8 月 29 日，商务部（以下称调查机关）发布 2024 年第 35 号公告，初步认定原产于欧盟的进口相关白兰地存在倾销，国内相关白兰地产业受到实质损害威胁，而且倾销与实质损害威胁之间存在因果关系。',
    date: '2024-10-04',
  },
]);
</script>

<style lang="scss" scoped>
.profile-page {
  background-color: #f9f9f9;
  padding: 20px;

  .search-section {
    margin-bottom: 30px;
  }

  .hot-searches-title {
    font-size: 16px;
    font-weight: bold;
  }

  .hot-searches-items {
    flex-direction: column;
  }

  .highlighted-text {
    font-size: 14px;
    color: #333;
  }

  .grid-section {
    margin-bottom: 30px;
  }

  .news-section {
    .news-container {
      background-color: #ffffff;
      border-radius: 8px;
      padding: 20px;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);

      .news-title {
        font-size: 20px;
        font-weight: bold;
        margin-bottom: 20px;
      }

      .news-list {
        .news-item {
          border-bottom: 1px solid #ddd;
          padding-bottom: 15px;
          margin-bottom: 15px;

          .news-title {
            font-size: 14px;
            font-weight: 600;
            margin: 0 0 8px 0;
          }

          .news-summary {
            font-size: 12px;
            color: #555;
            margin: 0 0 8px 0;
          }

          .news-date {
            font-size: 12px;
            color: #999;
            text-align: right;
          }
        }
        .news-item:last-child {
          border-bottom: none;
        }
      }
    }
  }
}
</style>